<template>
  <section>
     <!-- 面包屑 -->
 <breadcrumbs></breadcrumbs>
    <div>
      <p>采购单编号: <span>{{topData.orderNo}}</span></p>
      <p>采购公司: <span>{{topData.shopName}}</span></p>
    </div>
    <div class="top-details-box">
      <p>订单总金额: <span>{{topData.allMoney/100}}</span></p>
      <p>已收款金额: <span>{{ (parseInt(topData.allMoney) -parseInt(topData.balance))/100}}</span></p>
      <p>尾款金额: {{topData.balance/100}}</p>
    </div>
    <div>
      <el-button @click="editpayInfo()" style="margin-bottom:30px">修改</el-button>
    </div>
    <div>
      <div class="data-container scroll-table">
        <!-- 按钮列表 -->
         
        <el-table :data="tableData"
                  border
                  style="width: 100%"
                   @selection-change="tableSelectionChange">
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column type="index"
                           label="序号"
                           width="100">
          </el-table-column>
          <el-table-column prop="money"
                           label="收款金额">
                 <template slot-scope="scope">
                       {{scope.row.money/100}}
                 </template>
          </el-table-column>
          <el-table-column prop="addtime"
                           label="收款时间">
          </el-table-column>
          <el-table-column prop="remark"
                           label="收款备注">
          </el-table-column>
          <el-table-column prop="state"
                           label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.state==1">成功</div>
              <div v-if="scope.row.state==0">失败</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="修改收款金额"
               :visible.sync="xiugaidisable">
      <el-form :model="EditForm"
               :rules="rules"
               ref="EditForm">
        <el-form-item label="收款金额(元)"
                      label-width="120px"
                      prop="money">
          <el-input v-model="EditForm.money"
                    maxlength="30" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="changeName('EditForm')">确 定</el-button>
        <el-button @click="xiugaidisable = false">取 消</el-button>

      </div>
    </el-dialog>
  </section>
</template>

<script>
import breadcrumbs from "@/components/breadcrumbs.vue";
import {unitPriceValidate} from "../../utils/tool"
export default {
  name: "houseDetail",
  components: {
    breadcrumbs,
  },
  data () {
    return {
      EditForm: {},
      jinqian:"",
      opShopOrderId: "",
      detailData: {
        list: [],
      },
      topData: {},
      tableData: [],
      xiugaidisable:false,
         rules: {
        
        money: [
          { required: true, message: "请输入收款金额", trigger: "change" },
          { validator: unitPriceValidate, trigger: 'blur' }
        ],
    },
    }
 
  },
  created () {
    // console.log(this.$route.query.id)
    this.opShopOrderId = this.$route.query.opShopOrderId;
    this.houseData(this.opShopOrderId);
  },
  methods: {
    changeName(formName) {

       
            this.$api.outorder
              .updatemoney({
                 money: parseInt(this.EditForm.money*100),
                opShopOrderId: this.EditForm.shopOrderId,
                payId: this.EditForm.opShopOrderPayId,
              
              })
              .then((d) => {
                if (d.code == 200) {
                  this.$message.success("修改收款金额成功");
                  this.houseData(this.opShopOrderId);
                  this.xiugaidisable = false;
                } else {
                  // this.$message.error(d.msg);
                }
              });
        
         
       
   
    },
    editpayInfo(){
       if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
    
        this.EditForm = {

                money: this.tableSelection[0].money/100,
                shopOrderId: this.tableSelection[0].shopOrderId,
                opShopOrderPayId: this.tableSelection[0].opShopOrderPayId,
                remark: this.tableSelection[0].remark,

         };

      this.xiugaidisable = true;

    },
    exec (fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]()
      } else {
        this.$message.error('方法未定义');
      }
    },
     tableSelectionChange(val) {
      this.tableSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.currentPage, val);
      // eslint-disable-next-line no-console
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(val, this.pageSize);
      // eslint-disable-next-line no-console
      // console.log(`当前页: ${val}`);
    },
    houseData (opShopOrderId) {
      // console.log(mid)
      this.$api.operate.getAdminOpShopOrderPayList({
        opShopOrderId: opShopOrderId
      }).then(res => {
        if (res.code == 200) {
          this.topData = {
            allMoney: res.data.allMoney,
            balance: res.data.balance,
            orderNo: res.data.orderNo,
            shopName: res.data.shopName
          }
          this.tableData = res.data.paylist;
          console.log(this.detailData, 12313123)
        }
      })
    },
  }
}
</script>

<style scoped>
.top-details-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
}
.message-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>